/***
 * @Author:xxx
 * @Date:2020-08-19 17:43:18
 * @LastModifiedBy:xxx
 * @Last Modified time:2020-08-19 17:43:18
 */

import React, { Component } from 'react';
import './adminHeader.css';
import { Layout, Menu, Modal, Badge, message } from 'antd';
import userImg from '../../assets/image/userImg.png';
import { Link, withRouter } from 'react-router-dom';
import { MenuList } from '../../config/menuList';
import CheckSiginForm from '../Modal/check-signin-form';
import { reqSiginAskList } from '../../api';
import { connect } from 'react-redux';
import { logout, setChinaMap } from '../../redux/actions';
import { getRolesButtons } from '../../utils/storageUtils.js';
import icon6 from '../../assets/image/icon6.png'
import icon7 from '../../assets/image/icon7.png'

const { Header } = Layout;


class AdminHeader extends Component {

  state = {
    hover: false,
    hover1: false,
    visible: '0',
    count: '0',
    roleButtons: [], // 有权限的按钮
    showHeader: true,
  };

  handleMouseEnter = () => {
    this.setState({
      hover: true
    })
  }

  handleMouseLeave = () => {
    this.setState({
      hover: false
    })
  }

  handleMouseEnter1 = () => {
    this.setState({
      hover1: true
    })
  }

  handleMouseLeave1 = () => {
    this.setState({
      hover1: false
    })
  };

  handleLogout = () => {
    this.props.logout();
    this.props.setChinaMap({ chinaMap: '/' })
    this.props.history.replace('/#/login');
    localStorage.removeItem('chinaMap');
  };

  hasAuth = (item) => {  // 判断当前登录用户 对item是否有访问权限,返回值为false（没有权限）/true
    const { key } = item;
    const menus = this.menus;
    // console.log("权限判断",item,this.menus,this.role_name);
    // 1.如果当前用户是系统admin，返回true
    // 2.如果当前的item是公开的isPublic，返回true
    // 3.当前用户有次权限：key有没有在menus中，如果在menus中，返回true
    if (menus.indexOf(key) !== -1) {
      return true;
    } else {
      return false;
    }
  }

  menuListShow = () => {    // 展示 模块
    const pathname = this.props.location.pathname;
    return MenuList.map(item => {
      if (this.hasAuth(item)) {      // 权限里有才能展示出来
        this.selectedKeys = pathname;
        return (
          <Menu.Item key={item.key}>
            <Link to={item.key} >
              <span className="span-menu">{item.title}</span>
            </Link>
          </Menu.Item>
        )
      }
    })
  }

  getSiginAskList = async () => {   // 获取未处理的注册请求,判断是否有需要处理的请求   vvvvvvvvvvvvvvvvv
    const org_id = this.props.user.org.org_id;
    const result = await reqSiginAskList(org_id);
    //console.log("获取未审批注册信息",result);
    if (result.code === 200) {
      const count = result.data.length;
      this.setState({
        count
      })
    } else {
      message.error(result.data);
    }
  }

  showCheckList = () => {
    this.setState({
      visible: '1'
    })
  }

  handleCancel = () => {     // 对话框取消按钮
    this.setState({
      visible: '0'
    })
  }

  panduan = () => {
    const path = this.props.location.pathname;
    if (path.indexOf('/usercenter') >= 0) {
      return true;
    } else {
      return false;
    }
  }

  getroleButtons = () => {  // 获取该模块的有权限的按钮
    getRolesButtons().forEach((item) => {
      if (item.key === '/user-mgt') {
        this.setState({
          roleButtons: item.buttons
        })
      }
    })
  }


  componentDidUpdate() {
    if (this.props.location.pathname === '/home') {
      if (this.state.showHeader) {
        this.setState({
          showHeader: false
        })
        document.getElementsByTagName('main')[0].style.marginTop = 0 + 'px'
      }
    } else {
      if (!this.state.showHeader) {
        this.setState({
          showHeader: true
        })
        document.getElementsByTagName('main')[0].style.marginTop = 46 + 'px'
      }
    }
  }
  componentWillMount() {
    const menus = [];
    this.props.user.user_roles && this.props.user.user_roles.forEach((item) => {
      item.role_menus.map((item) => {
        return menus.push(item.key);
      })
    });
    this.menus = menus;   // 获取 模块权限的 路由数组

    const role_name = [];
    this.props.user.user_roles.map((item) => role_name.push(item.role_name_Zh));
    this.role_name = role_name;    // 获取  角色名称数组

    //this.getroleButtons();
    let role_list = JSON.parse(window.localStorage.getItem("roles_buttons"));
    role_list && role_list.forEach(item => {
      if (item.key === '/user-mgt') {
        if (item.buttons.length !== 0) {
          item.buttons.forEach(el => {
            if (el === 'user-find-processed') {
              this.getSiginAskList();
            }
          })
        }
      }
    })
    this.menuListShow();
  };

  render() {
    const { visible, count } = this.state;
    const username = this.props.user.user_name;
    return (
      <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%', visibility: this.state.showHeader ? 'visible' : 'hidden' }}>
        <div className="logo">
          {/* <img className="logoImg" src={logo} alt="logo" /> */}
          <p>
            矿井钻孔分析仪数据处理软件
            {this.panduan() ? <span className="subTitle">账号管理</span> : null}
          </p>
        </div>

        {/* <Menu theme="dark" selectedKeys={pathname} className="header-menu">
             {this.panduan() ? null : this.menuListShow() }
          </Menu> */}

        {this.panduan() ? <Link to='/home' className="return-home">返回首页</Link> : null}

        <div className="user-center">
          <Link
            // to="/usercenter/userInfo"   
            className="user-center-show"
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
          >
            <span className="user-img">
              <img src={userImg} alt="userImg"></img>
            </span>
            <span className="user-name">{username}</span>
          </Link>
          {/* {
              roleButtons.indexOf("user-find-processed") === -1 ? null : <Badge dot count={count}><i className="iconfont" onClick={this.showCheckList}>&#xe70f;</i></Badge>
            } */}
          <Badge dot count={count}><i className="iconfont" onClick={this.showCheckList}>&#xe70f;</i></Badge>
          {/* <div
            className="user-center-down"
            style={userDownShow}
            onMouseEnter={this.handleMouseEnter1}
            onMouseLeave={this.handleMouseLeave1}
          >
            <Link to="/usercenter/userInfo" className="user-select">个人中心</Link>
            <a className="user-select" onClick={this.handleLogout} >退出登录</a>
          </div> */}
          {/* <div className='user-setting'>
            <img src={icon6} alt="" style={{ marginLeft: 20 }} />
            <div style={{ marginLeft: 10 }}>设置</div>
          </div> */}
          <div className='user-exit' onClick={this.handleLogout}>
            <img src={icon7} alt="" style={{ marginLeft: 20 }} />
            <div style={{ marginLeft: 10 }}>退出</div>
          </div>
        </div>

        <Modal
          title="用户注册通知"
          className="check-modal"
          visible={visible === '1'}
          onCancel={this.handleCancel}
          style={{ width: 520, height: 600 }}
          footer={[
            null,
            null,
          ]}
          destroyOnClose={true}
        >
          <CheckSiginForm />
        </Modal>
      </Header>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { logout, setChinaMap }
)(withRouter(AdminHeader));